<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>首次登录-创建第一个频道</title>
<link type="text/css" rel="stylesheet" href="static/css/style.css" />
<link type="text/css" rel="stylesheet" href="static/js/art/artDialog.css" />
<script type="text/javascript" src="static/js/jquery.js"></script>
<script type="text/javascript" src="static/js/public.js"></script>
<script type="text/javascript" src="static/js/art/artDialog.js"></script>
</head>

<body>
<div id="header">
	<div class="main clearfix">
		<h1 id="logo"><img src="static/images/logo.png" /></h1>
		<div class="home">
			<div class="uHome"><a href="#">个人主页</a></div>
			<s></s>
			<div id="uinfoShow" class="uInfo">
				<div class="uhead"><a href="#"><img src="static/images/uheader.png"/></a></div>
				<div class="uname"><a href="#">用户名</a></div>
				<div class="newmsg"><a href="#" title="有2条新消息">2</a></div>
				<b></b>
				<ul class="info_show">
					<li class="letter b_t"><a href="#">私信</a>
						<div class="newmsg"><a href="#" title="有2条新消息">2</a></div>
					</li>
					<li class="set"><a href="#">设置</a></li>
					<li class="exit"><a href="#">退出</a></li>
				</ul>
			</div>
		</div>
	</div>
</div>
<div class="first_ti">
	<h3>ABCD，欢迎您来到17cast，请创建您的第一个频道。</h3>
</div>
<div class="main">
	<div class="c_first_login">
		<dl class="pcntdl_a">
			<dt>频道名称：</dt>
			<dd>
				<input class="setUname" type="text" value="">
			</dd>
		</dl>
		<dl class="pcntdl_a">
			<dt>频道地址：</dt>
			<dd>ABC.17CAST.COM/C/
				<input class="setCHurl" type="text" value="">
			</dd>
		</dl>
		<dl class="pcntdl_a">
			<dt>频道标签：</dt>
			<dd> <p id="chTags">
				<input class="setCHtag" maxlength="10" type="text" value="">
				<input class="setCHtag" maxlength="10" type="text" value="">
				<input class="setCHtag" maxlength="10" type="text" value="">
				</p>
				<p class="addNew_tags"> <a class="c_2 f_12" href="javascript:;" onClick="addTags();">+添加新标签</a> <span class="f_12">(您最多可输入5个频道标签)</span> </p>
				<script type="text/javascript">
								function addTags(){
									if($("#chTags input").length<5){
									$("#chTags").append(' <input class="setCHtag" maxlength="10" type="text" value="">')
									}
									else{
										 window.top.art.dialog({title:'提示',content:"您最多可输入5个频道标签",ok:true});
										}
									}
							</script> 
			</dd>
		</dl>
		<dl class="pcntdl_a">
			<dt>频道简介：</dt>
			<dd>
				<textarea class="textarea_intro" onkeyup="txt_num(this,this.value)" name="" cols="" rows="4"> </textarea>
				<span class="other_tip">(<span id="other_tip">0/100</span>)</span> </dd>
			<script type="text/javascript">
function txt_num(obj,val){
	var len = val.length;
	$("#other_tip").html(len+"/100"); 
	obj.value = obj.value.slice(0, 100);
	}
</script>
		</dl>
		<dl class="pcntdl_a">
			<dt>频道LOGO：</dt>
			<dd>
				<div class="fl logo_preview"><img  class="iSetLogo" src="static/images/c_logo58x58.jpg"/>
					<div id="preview_wrapper">
						<div id="preview_fake"> <img id="preview" onload="onPreviewLoad(this)" width="100" height="100"/> </div>
						<img id="preview_size_fake"/> </div>
				</div>
				<div class="fl iUpload">
					<p class="iUpload_btn">
						<input class="uploadLogo" name="浏览" id="upload_img" type="file" onchange="onUploadImgChange(this)"/>
					</p>
					<p class="f_12">请确保上传图片尺寸在60*60以上，大小少于2M的Jpeg,gif或png格式文件.</p>
				</div>
			</dd>
		</dl>
		<dl class="pcntdl_a">
			<dt>频道性质：</dt>
			<dd class="chTpye">
							<form name="form1" method="post" action="">
								<div class="type_f">
									<label>
										<input type="radio" name="RadioGroup1" value="公开" id="RadioGroup1_0">
										公开</label>
									
								</div>
								<div class="type_v">
								<label class="f">
										<input type="radio" name="RadioGroup1" value="付费" checked id="RadioGroup1_1">
										付费 </label><input class="num" type="text"  onkeyup="num(this);" onafterpaste="num(this);"> 
										元 <span class="f_12">* 频道性质确定后不能修改，如需修改性质，请关闭频道后新建。</span></div>
<script type="text/javascript">
function num(obj){
	if(obj.value.length==1){
		obj.value=obj.value.replace(/[^1-9]/g,'');
		}
	else{
		obj.value=obj.value.replace(/\D/g,'')
		}
	}
</script>
							</form>
						</dd>
		</dl>
		<p class="c_finish">
			<input class="Btn_a" type="submit" value="完 成">
		</p>
	</div>
</div>
<div id="footer">&copy; copyright 2008-2012 Gensee, Inc. 版权所有 <a href="http://www.miibeian.gov.cn/" target="_blank">浙ICP备12001889号-3</a> 浙B2-20120093</div>
<script type="text/javascript">
function onUploadImgChange(sender){
	if( !sender.value.match( /.jpg|.gif|.png/i ) ){
		alert('图片格式无效！');
		return false;
	}
	
	var objPreview = document.getElementById( 'preview' );
	var objPreviewFake = document.getElementById( 'preview_fake' );
	var objPreviewSizeFake = document.getElementById( 'preview_size_fake' );
	
	if( sender.files &&  sender.files[0] ){
		objPreview.style.display = 'block';
		objPreview.style.width = 'auto';
		objPreview.style.height = 'auto';
		
		// Firefox 因安全性问题已无法直接通过 input[file].value 获取完整的文件路径
		objPreview.src = sender.files[0].getAsDataURL();	
	}else if( objPreviewFake.filters ){ 
		// IE7,IE8 在设置本地图片地址为 img.src 时出现莫名其妙的后果
		//（相同环境有时能显示，有时不显示），因此只能用滤镜来解决
		
		// IE7, IE8因安全性问题已无法直接通过 input[file].value 获取完整的文件路径
		sender.select();
		var imgSrc = document.selection.createRange().text;
		
		objPreviewFake.filters.item(
			'DXImageTransform.Microsoft.AlphaImageLoader').src = imgSrc;
		objPreviewSizeFake.filters.item(
			'DXImageTransform.Microsoft.AlphaImageLoader').src = imgSrc;
		
		autoSizePreview( objPreviewFake, 
			objPreviewSizeFake.offsetWidth, objPreviewSizeFake.offsetHeight );
		objPreview.style.display = 'none';
	}
	$("#preview_wrapper").css("z-index","1");
}

function onPreviewLoad(sender){
	autoSizePreview( sender, sender.offsetWidth, sender.offsetHeight );
}

function autoSizePreview( objPre, originalWidth, originalHeight ){
	var zoomParam = clacImgZoomParam( 58,58, originalWidth, originalHeight );
	objPre.style.width = 58+'px';
	objPre.style.height = 58+'px';
	//objPre.style.marginTop = zoomParam.top + 'px';
	//objPre.style.marginLeft = zoomParam.left + 'px';
}

function clacImgZoomParam( maxWidth, maxHeight, width, height ){
	var param = { width:width, height:height, top:0, left:0 };
	
	if( width>maxWidth || height>maxHeight ){
		rateWidth = width / maxWidth;
		rateHeight = height / maxHeight;
		
		if( rateWidth > rateHeight ){
			param.width =  maxWidth;
			param.height = height / rateWidth;
		}else{
			param.width = width / rateHeight;
			param.height = maxHeight;
		}
	}
	
	param.left = (maxWidth - param.width) / 2;
	param.top = (maxHeight - param.height) / 2;
	
	return param;
}
</script>
</body>
</html>
